<!--
 * @Author: 260156 260156@gree.com.cn
 * @Date: 2022-08-05 14:54:26
 * @LastEditors: 260156 260156@gree.com.cn
 * @LastEditTime: 2022-10-12 16:46:32
 * @FilePath: \gree-zst-web\src\components\pagination\MyPagination.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by 260156 260156@gree.com.cn, All Rights Reserved. 
-->
<template>
  <el-pagination
    background
    layout="total, prev, pager, next, jumper, sizes"
    class="my-pagination"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  />
</template>

<script lang="ts" setup>
import { doScrollToTop } from "utils/helper";

interface Attrs {
  total: number;
  "current-page": number;
  "page-size": number;
}
const attrs = useAttrs() as unknown as Attrs;

interface Emits {
  (e: "change"): void;
}
const emits = defineEmits<Emits>();
function handleCurrentChange(currentPage: number) {
  emits("change");
}
let prevPageSize = attrs["current-page"];
async function handleSizeChange(size: number) {
  if (size < prevPageSize) {
    await doScrollToTop(1 / 4);
  }
  prevPageSize = size;
  if (size * (attrs["current-page"] - 1) <= attrs.total) {
    emits("change");
  }
}
</script>

<style lang="scss" scoped>
.my-pagination {
  justify-content: flex-end;
  :deep(.el-select .el-input) {
    width: 100px;
  }
}
</style>
